<template>
  <div>
    <header>
      <h3>万事达-TMS<span>客户端</span></h3>
      <div class="divHeader">新增订单</div>
    </header>
    <div id="dingD">*订单号：系统自动生成</div>
    <!--   运输地址 -->
    <hr>
    <el-steps :active="4" align-center>
      <el-step title="新增订单" description=""></el-step>
      <el-step title="订单审核" description="2017-09-24 10：24"></el-step>
      <el-step title="订单报价" description="2017-09-24 10：40"></el-step>
      <el-step title="签署合同" description=""></el-step>
      <el-step title="提货发车" description=""></el-step>
      <el-step title="在线运输" description=""></el-step>
      <el-step title="卸货发车" description=""></el-step>
      <el-step title="订单结束" description=""></el-step>
    </el-steps>
    <h3>运输地址</h3>
    <el-table
        :data="tableData"
        border
        style="width: 402px">
      <el-table-column
          prop="date"
          label="始发地"
          width="200px">
      </el-table-column>
      <el-table-column
          prop="name"
          label="目的地"
          width="200px">
      </el-table-column>
    </el-table>
    <h3>委托人信息</h3>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
        border
        style="width: 100%">
      <el-table-column
          prop="date"
          label="委托方"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="委托人"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="联系电话">
      </el-table-column>
      <el-table-column
          prop="address"
          label="提货地址">
      </el-table-column>
      <el-table-column
          prop="address"
          label="提货联系人">
      </el-table-column>
      <el-table-column
          prop="address"
          label="联系电话">
      </el-table-column>
    </el-table>
    <h3>收货人信息</h3>
    <el-table
        class="table-user"
        :data="tableData"
        :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
        border
        style="width: 70%">
      <el-table-column
          prop="date"
          label="收货方"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="收货人"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="联系电话">
      </el-table-column>
      <el-table-column
          prop="address"
          label="收货地址">
      </el-table-column>
    </el-table>
    <h3>计划时间</h3>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
        border
        style="width: 361px">
      <el-table-column
          prop="date"
          label="计划装货时间"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="计划装货时间"
          width="180">
      </el-table-column>
    </el-table>
    <h3>货物信息</h3>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
        border
        style="width: 80%">
      <el-table-column
          prop="date"
          label="货名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="规格信号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="总包装">
      </el-table-column>
      <el-table-column
          prop="address"
          label="总数量">
      </el-table-column>
      <el-table-column
          prop="address"
          label="总重量kg">
      </el-table-column>
      <el-table-column
          prop="address"
          label="总体积m³">
      </el-table-column>
    </el-table>
    <h3>订单备注</h3>
    <el-input
        type="textarea"
        :rows="2"
        class="el-input"
        placeholder="请输入内容"
        v-model="textarea">
    </el-input>
    <h3>运费统计</h3>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
        border
        style="width: 1081px">
      <el-table-column
          prop="date"
          label="单价"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="总里程（km）"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="运输费（￥）"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="其他费用（￥）"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="费用总计（￥）"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="报价截止日期"
          width="180">
      </el-table-column>

    </el-table>
    <section class="btn">
      <el-button @click="back">取消</el-button>
    </section>


  </div>
</template>

<script>
export default {
  name: "Order1",
  data(){
    return{
      textarea:'',
      tableData: [{
        date: '2016-05-02',
        name: '始发地',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods:{
    back(){
      console.log('a')
      this.$router.push('./checkorder')
    }

  }
}
</script>

<style scoped>
div{
  width: 100%;
}
.btn{
  width: 200px;
  text-align: center;
  margin: auto;
}
.el-input{
  width: 800px;
}
h3{
  text-align: left;
}
span{
  color: red;
}
.divHeader{
  background: rgb(153,169,191);
  font-size: 25px;
}
</style>